<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> 
    <style>
    	table.table-hover tr{
    	cursor:pointer;
    	}
    
    </style>
<div class="row" style="margin:100px 0px;">
<div class="col-xs-1" ></div>
	
	<div class="col-xs-10" >
		<button class="btn btn-sm btn-info" onclick="addMainType()"><span class="glyphicon glyphicon-plus"></span>增加权限</button>
		<br>
		<br>
		<table class="table table-hover" >
		  <a href="#" class="list-group-item active">
		    权限列表
		  </a>
		  <tbody id="mainTypeArea" style="border-width:1px;border-style:solid;border-color:#337AB7;">
		  <tr>
		        <td>名称</td> 
		        <td>描述</td> 
		        <td>链接</td> 
		        <td>编辑</td> 
		        <td>删除</td> 
		     </tr>
		  <c:forEach items="${permissions}" var="permission" varStatus="st"  >
    		<tr class='trMainId'>
    			<input type="hidden" value="${permission.id}">
		        <td>${permission.name}</td> 
		        <td>${permission.desc_}</td> 
		        <td>${permission.url}</td> 
		        <td><a><span class="glyphicon glyphicon-edit editMainType"></span></a></td> 
		        <td><a><span class="glyphicon glyphicon-trash deleteMainType"></span></a></td> 
		     </tr>
		</c:forEach>
	  </tbody>
	</table>
	</div>
</div>

<script>
//主分类下的删除
$("body").on("click",".deleteMainType",function(){
	var isConfirm = confirm("确认删除？这将会删除该权限");
	if(isConfirm){
		var $tr = $(this).parent().parent().parent();
		var id = $($tr).children().eq(0).val();
		$.ajax({
			url:"permission_delete",
			type:"post",
			data:{id:id},
			dataType:"json",
			success:function(data){
				$($tr).remove();
			},
			error:function(data){
			}
		});
	}
});

/**
 * 主分类增加按钮
 */
//点击增加按钮的操作
function addMainType(){
	var htmlStr = "<tr>";
	htmlStr+="<input type='hidden'>";
	htmlStr+=" <td><input class='form-control'  type='text'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subAdd'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delAdd' ><span class='glyphicon glyphicon-remove'></span></button></td>";
	htmlStr+="</tr>";
	$("#mainTypeArea").append(htmlStr);
}

/**
 * 主分类增加部分
 */
//增加时点击删除按钮，删除此元素
$("body").on("click",".delAdd",function(){
	$(this).parent().parent().remove();
});
//增加时点击增加按钮，传输数据到后台
$("body").on("click",".subAdd",function(){
	var name = $(this).parent().siblings().eq(1).children().eq(0).val();
	var desc_ = $(this).parent().siblings().eq(2).children().eq(0).val();
	var url = $(this).parent().siblings().eq(3).children().eq(0).val();
	
	var addMainTypeArea = $(this).parent().parent();
	$.ajax({
		url:"permission_add",
		type:"post",
		data:{name:name,desc_:desc_,url:url},
		dataType:"json",
		success:function(data){
			var permission = data;
			var htmlStr = "<input type='hidden' value='"+permission.id+"'>";
			htmlStr+="<td>"+permission.name+"</td>";
			htmlStr+="<td>"+permission.desc_+"</td>";
			htmlStr+="<td>"+permission.url+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
			$(addMainTypeArea).html(htmlStr);
		}
	});
});

/**
 * 主分类下编辑操作
 */
 
 var id;
 var name;
 var desc_;
 var url;
 
//编辑时点击编辑按钮，切换框
$("body").on("click",".editMainType",function(){
	var $tr = $(this).parent().parent().parent();
	 id = $($tr).children().eq(0).val();
	 name = $($tr).children().eq(1).text();
	 desc_ = $($tr).children().eq(2).text();
	url = $($tr).children().eq(3).text();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+=" <td><input class='form-control'  type='text' value='"+name+"'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text' value='"+desc_+"'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text' value='"+url+"'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subUpdate'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delUpdate'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
	$($tr).html(htmlStr);
});


//点击勾号的更新操作
$("body").on("click",".subUpdate",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var name = $(this).parent().siblings().eq(1).children().eq(0).val();
	var desc_ = $(this).parent().siblings().eq(2).children().eq(0).val();
	var url = $(this).parent().siblings().eq(3).children().eq(0).val();
	var updateMainTypeArea = $(this).parent().parent();
	$.ajax({
		url:"permission_update",
		type:"post",
		data:{id:id,name:name,desc_:desc_,url:url},
		dataType:"json",
		success:function(data){
			var permission = data;
			var htmlStr = "<input type='hidden' value='"+permission.id+"'>";
			htmlStr+="<td>"+permission.name+"</td>";
			htmlStr+="<td>"+permission.desc_+"</td>";
			htmlStr+="<td>"+permission.url+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
			$(updateMainTypeArea).html(htmlStr);
		}
	});
});

//点击X号时退回原来状态
$("body").on("click",".delUpdate",function(){
	var updateMainTypeArea = $(this).parent().parent();
	var htmlStr = "<input type='hidden' value='"+id+"'>";
	htmlStr+="<td>"+name+"</td>";
	htmlStr+="<td>"+desc_+"</td>";
	htmlStr+="<td>"+url+"</td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType'></span></a></td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType'></span></a></td>";
	$(updateMainTypeArea).html(htmlStr);
});
</script>
